"use client";

import React, { useMemo } from "react";
import { QuestionFile } from "@/components/Componentes/question-file";
import { QuestionAnswersProvider } from "@/components/Componentes/question-answer-storage";
import type { QuestionField } from "@/lib/schema-adapter";
import { I18nProvider } from "@/translations/provider";

const mockQuestion: QuestionField = {
  id: "documents_verification.other_supporting_documents",
  title: "Other Supporting Documents",
  type: "file",
  order: 1,
  required: false,
  baseRequired: false,
  isVisible: true,
  description: "",
  tooltip: "Supporting documents for identity verification",
  extras: {
    placeHolder: "",
    range: [0, 0],
    options: [".pdf", ".jpg", ".jpeg", ".png"],
  },
  options: [],
};

export default function PreviewUploadPage() {
  return (
    <I18nProvider locale="en">
      <QuestionAnswersProvider slug="preview" questions={[mockQuestion]} locale="en">
        <div className="mx-auto flex min-h-screen max-w-[430px] flex-col bg-[#FFF7F7] px-4 py-3 font-sans antialiased text-[#111111]">
          {/* Top Bar */}
          <div className="relative flex items-center rounded-2xl bg-gradient-to-r from-[#F0445B] to-[#F87171] px-4 py-3 text-white shadow-sm">
            <button type="button" className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-white">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M19 12H5M12 19l-7-7 7-7" />
              </svg>
            </button>
            <span className="ml-3 truncate font-bold text-sm">
              Document Upload, Identity Verific...
            </span>
          </div>

          {/* Progress Indicator */}
          <div className="mt-4 flex flex-col gap-1.5 px-1">
            <div className="flex justify-between text-[11px] font-medium text-gray-500">
              <span>fields to complete</span>
              <span>4 / 4</span>
            </div>
            <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
              <div className="h-full w-full rounded-full bg-[#F0445B]" />
            </div>
          </div>

          {/* Advisor Badge */}
          <div className="mt-6 flex justify-center">
            <div className="inline-flex items-center gap-1.5 rounded-full border border-[#FED7D7] bg-[#FFF5F5] px-3 py-1 text-xs font-semibold text-[#E53E3E]">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
                <line x1="1" y1="1" x2="23" y2="23" />
              </svg>
              <span>Private (Advisors Only)</span>
            </div>
          </div>

          {/* Question Component */}
          <div className="mt-4">
            <QuestionFile question={mockQuestion} debugProgress={100} />
          </div>

          {/* Spacer */}
          <div className="flex-1" />

          {/* Bottom Button */}
          <div className="mt-8 mb-4">
            <button
              type="button"
              className="flex h-12 w-full items-center justify-center rounded-2xl bg-[#F0445B] text-white shadow-md active:opacity-90"
            >
              <div className="flex items-center gap-1.5">
                <div className="h-2 w-2 rounded-full bg-white animate-pulse" />
                <div className="h-2 w-2 rounded-full bg-white animate-pulse delay-100" />
                <div className="h-2 w-2 rounded-full bg-white animate-pulse delay-200" />
              </div>
            </button>
          </div>
        </div>
      </QuestionAnswersProvider>
    </I18nProvider>
  );
}